<template>
  <div>
    <!-- 标题 -->
    <Nav :title="title"></Nav>
    <van-tabs @click-tab="act" v-model:active="active" class="name">
      <van-tab v-for="item in nav.navData" :key="item.id" :title="item.name">
        <div class="box">
          <span class="txt-t">{{ item.name }}</span>
          <span class="txt-b">{{ item.front_desc }}</span>

        </div>
      </van-tab>
    </van-tabs>

    <div class="goods">
      <ul class="goodsList" v-if="goods.data&&goods.data.length>0">
        <li class="goodsList-item" v-for="item in goods.data" :key="item.id" @click="toGoodsDetail(item.id)">
          <img class="img" :src="item.list_pic_url" alt="" />
          <div class="goods-txt">
            <span class="txt-t">{{ item.name }}</span>
            <span class="txt-b">${{ item.retail_price }}</span>
          </div>
        </li>
      </ul>
      <div v-else>
        <h2>暂无数据</h2>
      </div>
    </div>
  </div>
</template>

<script>
import { categoryNav, goodsList } from '@/api/kind/kind'
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'
export default {
  name: 'GoodList',
  setup () {
    const router = useRouter()
    const route = useRoute()
    const id = ref('')
    const nav = ref([])
    const active = ref('')
    const goods = ref('')
    const title = ref('分类详情')
    async function a () {
      id.value = route.query.id
      const a1 = await categoryNav({ id: route.query.id })
      console.log(a1.navData)
      nav.value = a1
      const idxId = Number(route.query.id)
      const index = a1.navData.findIndex((el) => { return el.id === idxId })
      console.log(index)
      active.value = index
      const b = await goodsList({ categoryId: id.value })
      goods.value = b
    }
    a()
    const act = (na, val) => {
      console.log('na', na, val)
      categoryNav({ id: id.value }).then(res => {
        id.value = res.navData[na.name].id
        goodsList({ categoryId: id.value }).then(resu => {
          goods.value = resu
        })
      })
    }
    const toGoodsDetail = (id) => {
      router.push({
        path: '/home/goodsDetail',
        query: { id: id }
      })
    }
    return { id, nav, active, goods, act, title, toGoodsDetail }
  }
}
</script>

<style lang="scss" scoped>
@import './scss/index.scss'
</style>
